<template>
  <div class="add-module">
    <fks-dialog
      :visible.sync="Visible"
      width="480px"
      :append-to-body="true"
      destroy-on-close
      @close="cancel"
    >
      <div slot="title">
        <i v-if="type == '1'" class="fks-icon-plus" :style="{ color: theme }" />
        <i v-if="type == '2'" class="fks-icon-edit" :style="{ color: theme }" />
        {{ title }}
      </div>

      <fks-form
        ref="Form"
        :model="Form"
        label-position="left"
        label-width="72px"
      >
        <fks-form-item prop="code" :label="LANG.CODE" required>
          <fks-input v-model="Form.code" maxlength="50" show-word-limit />
        </fks-form-item>
        <fks-form-item prop="name" :label="LANG.NAME" required>
          <fks-input v-model="Form.name" maxlength="50" show-word-limit />
        </fks-form-item>
      </fks-form>
      <div class="btns">
        <section>
          <fks-button
            v-permission="['i18n:save']"
            type="primary"
            style="margin-top: 8px"
            icon="fks-icon-check"
            @click="submit"
          >
            {{ LANG.SAVE }}
          </fks-button>
        </section>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import { ENUM } from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
export default {
  name: 'ModuleDetail',
  props: {
    visible: {
      type: Boolean
    },
    type: String || Number,
    data: {
      type: Object
    }
  },
  data() {
    return {
      Form: {
        code: '',
        name: '',
        parentId: '0'
      },
      Visible: false
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    },
    //模块打开时标题状态
    title() {
      switch (this.type) {
        case '0':
          return this.LANG.ADD_CATEGORY
        case '1':
          return this.LANG.ADD_MODULE
        case '2':
          return this.LANG.EDIT_MODULE
        default:
          return ''
      }
    }
  },
  watch: {
    visible(val) {
      this.Visible = val
      if (val) {
        if (this.data && JSON.stringify(this.data) != '{}') {
          this.Form = Object.assign(this.Form, { ...this.data })
        }
      } else {
        this.resetForm()
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    resetForm() {
      this.Form = {
        code: '',
        name: '',
        parentId: '0'
      }
    },
    cancel() {
      this.resetForm()
      this.close()
    },
    submit() {
      this.$refs.Form.validate((validate) => {
        if (validate) {
          this.$emit('submit', this.Form)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.btns {
  height: 25px;

  section {
    float: right;
  }
}

::v-deep .fks-icon-check {
  margin-right: 4px;
}
</style>